<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>度假屋户型管理</title>
    <script type="text/javascript">
        $(function () {
            $(".delImg").hide();
            $("#firstImage").change(function () {
                $("#addImage").show();
                $("#delImage").show();
            });
            $("#addImage").click(function () {
                var content = '<input type="file"  name="images">';
                if ($(":file").length < 5) {
                    $(":file:last").after(content);
                }
            });
            $("#delImage").click(function () {
                if ($(":file").length > 1) {
                    $(":file:last").remove();
                } else {
                    $(":file:last").val("");
                }
            });
            binddelImg();
        });

        function binddelImg() {
            var delImgs = $("[id^=delImg_]");
            for (var i = 0; i < delImgs.length; i++) {
                delImgs.eq(i).bind({
                    mouseenter: function (e) {
                        $(this).show();
                    },
                    mouseleave: function (e) {
                        $(this).hide();
                    }
                });
            }
        }

        function mouseover(id) {
            var index = id.substr(6);
            $("#delImg_" + index).show();
        }

        function mouseout(id) {
            var index = id.substr(6);
            $("#delImg_" + index).hide();
        }

        function delImg(imgGuid) {
            $.ajax({
                url: "/house/houseType/delImg/" + imgGuid,
                type: "get",
                dataType: "text",
                success: function (data) {
                    location.reload();
                }
            })
        }
    </script>
</head>
<body>

<form:form class="form-horizontal" role="form" commandName="houseTypeDTO" action="/house/houseType/form"
           enctype="multipart/form-data">
    <form:hidden path="guid" value="${houseTypeDTO.guid}"/>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label for="houseName" class="col-sm-2 control-label">户型名称：</label>

            <div class="col-sm-10">
                <form:input path="name" id="houseName" placeholder="请输入名称" cssClass="form-control input-lg"/>
                <form:errors path="name" cssClass="t16"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label for="housePrice" class="col-sm-2 control-label">户型价格：</label>

            <div class="col-sm-10">
                <form:input path="price" id="housePrice" placeholder="请输入价格" cssClass="form-control input-lg"/>
                <form:errors path="price" cssClass="t16"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label for="area" class="col-sm-2 control-label">实际面积：</label>

            <div class="col-sm-10">
                <form:input path="area" id="area" placeholder="请输入面积" cssClass="form-control input-lg"/>
                <form:errors path="area" cssClass="t16"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label for="buildingArea" class="col-sm-2 control-label">建筑面积：</label>

            <div class="col-sm-10">
                <form:input path="buildingArea" id="buildingArea" placeholder="请输入面积" cssClass="form-control input-lg"/>
                <form:errors path="buildingArea" cssClass="t16"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label for="extraArea" class="col-sm-2 control-label">赠送面积：</label>

            <div class="col-sm-10">
                <form:input path="extraArea" id="extraArea" placeholder="请输入面积" cssClass="form-control input-lg"/>
                <form:errors path="extraArea" cssClass="t16"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label for="personNum" class="col-sm-2 control-label">可住人数：</label>

            <div class="col-sm-10">
                <form:select path="personNum" id="personNum" cssStyle="width: 150px;">
                    <c:forEach begin="1" end="20" var="item">
                        <form:option value="${item}">${item}</form:option>
                    </c:forEach>
                </form:select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label for="houseType" class="col-sm-2 control-label">户型：</label>

            <div class="col-sm-10">
                <form:select path="houseTypeAsValue" id="houseType" cssStyle="width: 150px;">
                    <c:forEach items="${houseTypeDTO.houseTypes}" var="item">
                        <form:option value="${item.name}">${item.label}</form:option>
                    </c:forEach>
                </form:select>
            </div>
        </div>
    </div>

    <div>
        <div class="col-sm-offset-2 col-sm-10">
            <label class="col-sm-2 control-label">户型图片：</label>

            <div id="buildingTypeImages">
                <c:if test="${houseTypeDTO.imageGuids!=null}">
                    <c:forEach items="${houseTypeDTO.imageGuids}" var="images" varStatus="status">
                        <img src="/public/image/${images}" style="width:50px;height:70px"
                             class="houseBaseImg" id="hbImg_${status.index}"
                             onmouseover="mouseover('hbImg_${status.index}')"
                             onmouseout="mouseout('hbImg_${status.index}')">
                        <img src="/public/img/x.png" style="margin-top: -35px;margin-left:-39px;opacity:0.8"
                             class="delImg" onclick="delImg('${images}')" id="delImg_${status.index}">
                    </c:forEach>
                </c:if>
            </div>
            <div class="col-sm-10">
                <input type="file" id="firstImage" name="images">
                <a id="addImage" style="display:none">添加</a>&nbsp;
                <a id="delImage" style="display:none">删除</a>
            </div>
        </div>
    </div>


    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="col-sm-offset-2 col-sm-10">
                <form:hidden path="houseBaseGuid" value="${houseBaseGuid}"/>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</form:form>

</body>
</html>
